<!-- Created by jack on 2022/2/14 - 10:00 -->
<style scoped lang="less">
.windowController-box{
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1;
  &__blur:not(&:hover){
    filter: grayscale(100);
  }
  &:hover > &__close-icon::after,
  &:hover > &__close-icon::before ,
  &:hover > &__min-icon::after,
  &:hover > &__min-icon::before,
  &:hover > &__max-icon::after, &:hover > &__max-icon::before { opacity: 1;}
  &__button{
    border: 1px solid rgba(20, 27, 39, 0.07);
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    &:active{ opacity: 0.8;}

  }

  &__close{
    background: #ee6252;
    margin-right: 4px;
  }
  &__min{
    background: #f5b63d;
    margin-right: 4px;
  }
  &__max{
    background: #52ba44;
  }

  &__close-icon{
    transform: rotate(45deg);
    &::after{
      opacity: 0;
      content: '';
      width: 60%;
      height: 1px;
      background: #6b1a11;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    &::before{
      opacity: 0;
      content: '';
      height: 60%;
      width: 1px;
      background: #6b1a11;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  &__min-icon{

    &::after{
      opacity: 0;
      content: '';
      width: 60%;
      height: 1px;
      background: #255c15;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  &__max-icon{

    &::after{
      opacity: 0;
      content: '';
      width: 60%;
      height: 1px;
      background: #36841d;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    &::before{
      opacity: 0;
      content: '';
      height: 60%;
      width: 1px;
      background: #36841d;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
}
</style>

<template>
  <div class="windowController-box" :class="{'windowController-box__blur':!focusSign}">
    <div class="windowController-box__close windowController-box__button windowController-box__close-icon" @click="emit('close')"/>
    <div  class="windowController-box__min windowController-box__button windowController-box__min-icon" @click="emit('min')"/>
    <div  class="windowController-box__max windowController-box__button windowController-box__max-icon" @click="emit('max')"/>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  focusSign:{ type:Boolean, default: true}
})
const emit = defineEmits(['close','min','max'])
</script>
